<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header-nav" :style="{position: headerPosition, top: headerTop}">
      <view class="nav-back" @click="goBack">
        <image src="../..//static/images/back.png" class="back-icon"></image>
      </view>
      <view class="nav-title">
        <text>商品详情</text>
      </view>
      <view class="nav-right">
        <!-- 右侧可以放置其他操作按钮 -->
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-wrapper">
      <view class="carousel">
        <swiper indicator-dots circular=true duration="400">
          <swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
            <view class="image-wrapper">
              <image v-if="item && item.src" :src="item.src" class="loaded" mode="aspectFill"></image>
              <image v-else src="../../static/images/jiarelu.jpg" class="loaded" mode="aspectFill"></image>
            </view>
          </swiper-item>
        </swiper>
      </view>

      <view class="introduce-section">
        <text class="title">{{equip_name}}</text>
        <text class="description" v-if="equip_description">{{equip_description}}</text>
        <view class="price-box">
          <text class="price-tip">¥</text>
          <text class="price">{{equip_price}}</text>
          <text class="m-price" v-if="equip_price">¥{{(parseFloat(equip_price) * 1.4).toFixed(2)}}</text>
          <text class="coupon-tip">优惠</text>
        </view>
        <view class="bot-row">
          <text>销量: {{Math.floor(Math.random() * 500) + 100}}</text>
          <text>库存: {{Math.floor(Math.random() * 5000) + 1000}}</text>
          <text>浏览量: {{Math.floor(Math.random() * 1000) + 500}}</text>
        </view>
      </view>

      <!--  分享 -->
      <view class="share-section" @click="share">
        <view class="share-icon">
          <text class="yticon icon-xingxing"></text>
          返
        </view>
        <text class="tit">该商品分享可领49减10红包</text>
        <text class="yticon icon-bangzhu1"></text>
        <view class="share-btn">
          立即分享
          <text class="yticon icon-you"></text>
        </view>

      </view>

      <view class="c-list">
        <view class="c-row b-b" @click="toggleSpec">
          <text class="tit">购买类型</text>
          <view class="con">
            <text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
              {{sItem.name}}
            </text>
          </view>
          <text class="yticon icon-you"></text>
        </view>
        <view class="c-row b-b">
          <text class="tit">优惠券</text>
          <text class="con t-r red">领取优惠券</text>
          <text class="yticon icon-you"></text>
        </view>
        <view class="c-row b-b">
          <text class="tit">促销活动</text>
          <view class="con-list">
            <text>新人首单送20元无门槛代金券</text>
            <text>订单满50减10</text>
            <text>订单满100减30</text>
            <text>单笔购买满两件免邮费</text>
          </view>
        </view>
        <view class="c-row b-b">
          <text class="tit">服务</text>
          <view class="bz-list con">
            <text>7天无理由退换货 ·</text>
            <text>假一赔十 ·</text>
          </view>
        </view>
      </view>

      <!-- 评价 -->
      <view class="eva-section">
        <view class="e-header">
          <text class="tit">评价</text>
          <text>({{comments.length}})</text>
          <text class="tip">好评率 100%</text>
          <text class="yticon icon-you"></text>
        </view>
        <view class="eva-box" v-for="(item, index) in comments" :key="index">
          <image class="portrait" :src='item.photo_user || "../../static/images/default-avatar.png"' mode="aspectFill"></image>
          <view class="right">
            <text class="name">{{item.nickname_user}}</text>
            <text class="con">{{item.comments_user}}</text>
            <view class="bot">
              <text class="attr"> </text>
              <text class="time" v-if="item.comments_time">{{item.comments_time.split("T")[0]+" "+item.comments_time.split("T")[1].split(".")[0]}}</text>
              <!-- 屎山代码 本来时间是2023-08-08T06:58:11.000+00:00 -->
            </view>
          </view>
        </view>
      </view>

      <view class="detail-desc">
        <view class="d-header">
          <text>图文详情</text>
        </view>
        <rich-text :nodes="desc"></rich-text>
      </view>
    </view>

    <!-- 底部操作菜单 -->
    <!-- Option 1: Add inline content to ensure icons are visible -->
    <view class="page-bottom">
      <navigator url="/pages/index1/index1" open-type="switchTab" class="p-b-btn">
        <image src="../..///static/images/shouye-bottom.png" mode="aspectFit" class="cart-icon"></image>
        <text>首页</text>
      </navigator>
      <navigator :url="'/pages/cart/cart?userAccount='+userAccount" open-type="navigate" class="p-b-btn">
        <image src="../..//static/images/gouwuche.png" mode="aspectFit" class="cart-icon"></image>
        <text>购物车</text>
      </navigator>
      <view class="p-b-btn" :class="{active: favorite}" @click="toFavorite">
        <image src="../..////static/images/shoucang-bottom.png" mode="aspectFit" class="cart-icon"></image>
        <text>收藏</text>
      </view>

      <view class="action-btn-group">
        <button type="primary" class="action-btn no-border add-cart-btn" @click="prepareAddCart">加入购物车</button>
        <button type="primary" class="action-btn no-border buy-now-btn" @click="prepareBuy">立即购买</button>
      </view>
    </view>

    <!-- 返回顶部悬浮按钮 -->
    <view class="back-to-top" v-show="showBackToTop" @click="scrollToTop">
      <text class="yticon icon-arrow-up">&#x2191;</text>
    </view>

    <!-- 分享 -->
    <share ref="share" :contentHeight="580" :shareList="shareList"></share>
    <!-- 弹出卡片 -->
    <view class="pop-card" :style="{bottom:cardBottom}">
      <!-- 关闭按钮 -->
      <text class="close" @click="moveCard(0,-70,-2.5)">×</text>
      <view :style="{
				'display':'flex',
				'align-items': 'center'
			}">
        <view class="image-wrapper">
          <image v-if="imgList && imgList[0] && imgList[0].src" :src="imgList[0].src" class="image-loaded" mode="center" lazy-load
                 @error="onImageError"></image>
          <image v-else src="../../static/images/jiarelu.jpg" class="image-loaded" mode="center"></image>
        </view>
        <view>
          <view class="price">
            <text>¥</text>
            <text class="price-num">{{equip_price}}</text>
          </view>
          <view class="choice">
            <text>已选：</text>
            <text>{{number}}件</text>
          </view>
        </view>
      </view>
      <!-- 选择商品数量 -->
      <view class="choose-num">
        <text>数量</text>
        <uni-number-box class="choose" :min="1" :max="999" :value="1" :isMax="false" :isMin="false" :index="0"
                        @eventChange="numberChange"></uni-number-box>
      </view>

      <button class="confirm" :style="{'bottom': cardBottom.split('vh')[0]+5+'vh'}" @click="clickConfirm">确定</button>

    </view>
  </view>
</template>

<script>
import uniNumberBox from '@/components/uni-number-box.vue'
import share from '@/components/share';
import {
  _findProduct
} from '@/service/shop.js'
import {
  _addProduct
} from '@/service/shop.js'
import {
  _deleteByProduct
} from '@/service/shop.js'
import {
  _findCommodity
} from '@/service/shop.js'
import {
  _getcommentsbyserialnum
} from '@/service/shop.js'

export default {

  components: {
    share,
    uniNumberBox
  },
  data() {
    return {
      equip_name: '商品名称',
      equip_price: '0.00',
      equip_description: '商品描述',
      cardBottom: '-70vh',//卡片底部与图片底部的距离
      specClass: 'none',
      specSelected: [],
      number:1,//选中商品数量
      direction:'',//通向购买还是购物车的记录
      serialnum: null, //商品序列号，同后端serialnum_commodity
      userAccount: null, //用户账号(手机号),同后端account_user
      favorite: false,
      shareList: [],
      // 初始化为默认图片
      imgList: [{
        src: '../../static/images/jiarelu.jpg'
      },
        {
          src: '../../static/images/jiarelu.jpg'
        },
        {
          src: '../../static/images/jiarelu.jpg'
        }
      ],
      desc: `
					<div style="width:100%">
						<img style="width:100%;display:block;" src="../../static/images/185a1614b300a14890764dba0bbeae19.png" />
					</div>
				`,
      comments:[],
      showBackToTop: false, // 控制返回顶部按钮显示
      scrollTop: 0, // 当前滚动位置

      // 顶部导航栏相关数据
      headerPosition: "fixed",
      headerTop: "0px",
    };
  },
  onLoad() {
    console.log('📄 product.vue 页面加载');
    
    // 参考HM-search.vue的处理方式
    // #ifdef H5
    this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
    // #endif

    // 优先读取用户信息
    try {
      const userInfo = uni.getStorageSync('userInfo');
      if (userInfo && userInfo.accountNum) {
        this.userAccount = userInfo.accountNum;
        console.log('👤 用户账号已加载:', this.userAccount);
      } else {
        console.warn('⚠️ 未找到用户信息');
      }
    } catch (e) {
      console.error('❌ 读取用户信息失败:', e);
    }

    // 加载商品数据
    this.loadProductData();
  },

  onShow() {
    console.log('📄 product.vue 页面显示');
    // 每次页面显示时重新加载商品数据，确保显示最新的商品信息
    this.loadProductData();
  },

  // 页面滚动监听
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
    // 当滚动超过一定高度时显示返回顶部按钮，例如300px
    this.showBackToTop = e.scrollTop > 300;

    // 兼容iOS端下拉时顶部漂移
    if(e.scrollTop>=0){
      this.headerPosition = "fixed";
    }else{
      this.headerPosition = "absolute";
    }
  },

  methods: {
    // 加载商品数据的统一方法
    loadProductData() {
      console.log('🔄 开始加载商品数据...');
      // 读取商品数据
      try {
        let productData = uni.getStorageSync('shoptoproduct')
        console.log('📦 从本地存储读取的商品数据:', productData)
        console.log('📦 productData 类型:', typeof productData, 'productImage类型:', typeof productData?.productImage)
        
        if (productData && productData.name_commodity) {
          // 设置商品基本信息
          this.equip_name = productData.name_commodity || '商品名称'
          this.equip_price = productData.money_commodity || '0.00'
          this.equip_description = productData.description_commodity || '商品描述'
          this.serialnum = productData.serialnum_commodity || null
          
          console.log('✅ 商品名称:', this.equip_name)
          console.log('✅ 商品价格:', this.equip_price)
          console.log('✅ 商品描述:', this.equip_description)
          console.log('✅ 商品序列号:', this.serialnum)

          // 根据传递的数据设置图片
          let productImage;
          if (productData.productImage && typeof productData.productImage === 'string' && productData.productImage.trim() !== '') {
            // 如果有传递图片数据，优先使用传递的图片
            productImage = productData.productImage;
            console.log('🖼️ 使用传递的商品图片:', productImage)
          } else {
            // 如果没有传递图片，根据商品名称获取对应图片
            productImage = this.getProductImage(productData);
            console.log('🖼️ 根据商品名称获取图片:', productImage)
          }

          // 确保 productImage 是有效的字符串
          if (typeof productImage !== 'string' || productImage.trim() === '') {
            console.warn('⚠️ productImage 无效，使用默认图片', productImage)
            productImage = '../../static/images/jiarelu.jpg';
          }

          // 设置轮播图（三张相同的图片）
          this.imgList = [
            { src: productImage },
            { src: productImage },
            { src: productImage }
          ];
          console.log('🎠 轮播图设置完成:', this.imgList)
          console.log('🎠 轮播图第一项:', this.imgList[0], '类型:', typeof this.imgList[0]?.src)
          
          // 使用 nextTick 确保视图更新
          this.$nextTick(() => {
            this.$forceUpdate()
            console.log('✨ 视图已强制更新')
          })
          
          // 读取用户信息（如果还没有的话）
          if (!this.userAccount) {
            try {
              const userInfo = uni.getStorageSync('userInfo');
              if (userInfo && userInfo.accountNum) {
                this.userAccount = userInfo.accountNum
                console.log('👤 用户账号:', this.userAccount)
              }
            } catch (e) {
              console.error('❌ 读取用户信息失败:', e);
            }
          }

          // 进入页面查找云端是否有收藏信息
          const self = this;
          if (this.serialnum) {
            this.isFavorite().
            then(function(data) {
              self.favorite = false; // 先重置为false
              for (let i = 0; i < data.length; ++i) {
                if (self.serialnum == data[i].serialnum_commodity) {
                  self.favorite = true;
                  console.log('⭐ 该商品已收藏')
                  break;
                }
              }
            }).catch(function(error) {
              console.log('查询收藏状态失败:', error);
            });
            
            // 获取评论
            this.getComments().
            then((data)=>{
              self.comments = data;
              console.log('💬 评论加载成功，共', data.length, '条')
            }).catch((error)=>{
              console.log('获取评论失败:', error);
            })
          }
        } else {
          console.warn('⚠️ 未找到商品数据或数据不完整')
          // 使用默认数据
          this.equip_name = '商品名称'
          this.equip_price = '0.00'
          this.equip_description = '暂无描述'
          this.imgList = [
            { src: '../../static/images/jiarelu.jpg' },
            { src: '../../static/images/jiarelu.jpg' },
            { src: '../../static/images/jiarelu.jpg' }
          ];
        }
      } catch (e) {
        console.error('❌ 读取商品数据失败:', e)
        // 出错时使用默认数据
        this.equip_name = '商品名称'
        this.equip_price = '0.00'
        this.equip_description = '暂无描述'
        this.imgList = [
          { src: '../../static/images/jiarelu.jpg' },
          { src: '../../static/images/jiarelu.jpg' },
          { src: '../../static/images/jiarelu.jpg' }
        ];
      }
    },

    // 返回上一页 - 修改后的方法
    goBack() {
      // 检查是否能够返回
      const pages = getCurrentPages();
      if (pages.length > 1) {
        // 有上一页，正常返回
        uni.navigateBack({
          delta: 1
        });
      } else {
        // 没有上一页，跳转到首页
        uni.switchTab({
          url: '/pages/index1/index1'
        });
      }
    },

    // 返回顶部方法
    scrollToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },

    //获取评论
    async getComments(){
      let resultData;
      try {
        resultData = await _getcommentsbyserialnum({
          serialnum_commodity: this.serialnum
        });
      } catch (error) {
        throw error; //抛出异常
      }
      if (resultData == undefined || resultData != undefined && resultData.status != 200) {
        throw new Error("接口返回异常，位置product.vue : getComments");
      }
      return resultData.data;
    },

    // === 原有的product.vue方法 ===

    //点击了确认按钮
    clickConfirm(){
      if(this.direction == 'cart'){
        this.addCart_();
      }else if(this.direction == 'buy'){
        this.buy();
      }
      this.moveCard(0,-70,-2.5);
    },
    //准备加入购物车
    prepareAddCart(){
      console.log('🛒 准备加入购物车，当前商品信息:', {
        name: this.equip_name,
        price: this.equip_price,
        serialnum: this.serialnum,
        userAccount: this.userAccount,
        number: this.number
      });
      
      // 验证必要数据
      if (!this.userAccount) {
        console.warn('⚠️ 用户未登录');
        uni.showToast({
          title: "请先登录",
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      if (!this.serialnum) {
        console.warn('⚠️ 商品序列号缺失');
        uni.showToast({
          title: "商品信息异常",
          icon: 'none',
          duration: 2000
        });
        return;
      }
      
      this.direction = 'cart'
      this.moveCard(-70,0,2.5);//弹出card
    },
    //准备购买
    prepareBuy(){
      this.direction = 'buy'
      this.moveCard(-70,0,2.5);//弹出card
    },

    //移动card，传入开始位置，结束位置，步长
    moveCard(begin,end,step){
      let current = parseInt(this.cardBottom.split('vh')[0]);
      if(current == end){
        return ;
      }
      if(current < end ){
        if(current + step >= end){
          current = end;
        }else{
          current += step;
        }
      }else{
        if(current + step <= end){
          current = end;
        }else{
          current += step;
        }
      }
      this.cardBottom = current + 'vh';
      setTimeout(()=>{
        this.moveCard(begin,end,step);
      },5);
    },

    async addCart_(){
      console.log('🛒 开始添加到购物车，参数:', {
        account_user: this.userAccount,
        serialnum_commodity: this.serialnum,
        joining_method: 2,
        joining_number: this.number
      });
      
      // 验证必要参数
      if (!this.userAccount) {
        console.error('❌ 用户账号缺失');
        uni.showToast({
          title: "请先登录",
          icon: 'error',
          duration: 2000
        });
        return;
      }
      
      if (!this.serialnum) {
        console.error('❌ 商品序列号缺失');
        uni.showToast({
          title: "商品信息缺失",
          icon: 'error',
          duration: 2000
        });
        return;
      }
      
      let resultData;
      try {
        resultData = await _addProduct({
          account_user: this.userAccount,
          serialnum_commodity: this.serialnum,
          joining_method: 2,  // 2表示加入购物车
          joining_number: this.number
        });
        console.log('✅ 添加购物车API返回:', resultData);
      } catch (error) {
        console.error('❌ 添加购物车网络错误:', error);
        uni.showToast({
          title: "网络异常",
          icon: 'error',
          duration: 2000
        });
        return;
      }
      
      if (resultData == undefined || resultData != undefined && resultData.status != 200) {
        console.error('❌ 添加购物车失败，状态码:', resultData?.status, '返回数据:', resultData);
        uni.showToast({
          title: resultData?.message || "添加失败",
          icon: 'error',
          duration: 2000
        });
        return;
      }
      
      console.log('✅ 成功加入购物车');
      uni.showToast({
        title: "添加成功",
        icon: 'success',
        duration: 1500
      });
    },

    //购买
    buy(){
      const productInfo = {
        'account_user': this.userAccount,
        'serialnum_commodity': this.serialnum,
        'count_product': this.number
      };
      uni.setStorageSync('productInfo',productInfo);
      uni.navigateTo({
        url: '/pages/order/createOrder'
      });
    },

    //数量改变
    numberChange(data) {
      this.number = data.number;
    },

    //收藏取消或者添加
    toFavorite() {
      let self = this;
      if (this.favorite) {
        this.cancelFavorite().then(function(data) {
          uni.showToast({
            title: '取消收藏'
          });
          self.favorite = false;
        }).catch(function(data) {
          uni.showToast({
            title: '取消失败',
            icon: 'error'
          });
        });
      } else {
        this.addFavorite().then(function(data) {
          uni.showToast({
            title: '收藏成功'
          });
          self.favorite = true;
        }).catch(function(data) {
          uni.showToast({
            title: '收藏失败',
            icon: 'error'
          });
        });
      }
    },

    //查询该用户是否收藏
    async isFavorite() {
      let resultData;
      try {
        resultData = await _findProduct({
          account_user: this.userAccount
        });
      } catch (error) {
        throw error; //抛出异常
      }
      if (resultData == undefined || resultData != undefined && resultData.status != 200) {
        throw new Error("接口返回异常，位置product.vue : isFavorite");
      }
      return resultData.data;
    },

    //添加收藏
    async addFavorite() {
      let resultData;
      try {
        resultData = await _addProduct({
          account_user: this.userAccount,
          serialnum_commodity: this.serialnum,
          joining_method: 0, //0表示收藏
          joining_number: 0 //收藏的数量是0
        });
      } catch (error) {
        throw error; //抛出异常
      }
      if (resultData == undefined || resultData != undefined && resultData.status != 200) {
        throw new Error("接口返回异常，位置product.vue : addFavorite");
      }
      return resultData.data;
    },

    //取消收藏
    async cancelFavorite() {
      let resultData;
      try {
        resultData = await _deleteByProduct({
          account_user: this.userAccount,
          serialnum_commodity: this.serialnum,
          joining_method: 0 //0表示收藏
        });
      } catch (error) {
        throw error; //抛出异常
      }
      if (resultData == undefined || resultData != undefined && resultData.status != 200) {
        throw new Error("接口返回异常，位置product.vue : cancelFavorite");
      }
      return resultData.data;
    },

    //查找商品
    async findCommodity() {
      let resultData;
      try {
        resultData = await _findCommodity({
          serialnum_commodity: this.serialnum
        });
      } catch (error) {
        throw error; //抛出异常
      }
      if (resultData == undefined || resultData != undefined && resultData.status != 200) {
        throw new Error("接口返回异常，位置product.vue : findCommodity");
      }
      return resultData.data;
    },

    share() {
      this.$refs.share.toggleMask();
    },

    //处理图片加载错误
    onImageError(item) {
      console.log('图片加载失败:', item);
    },

    // 切换规格
    toggleSpec() {
      // 规格选择功能可以在这里实现
    },
    
    // 根据商品名称获取对应的图片路径
    getProductImage(item) {
      const productName = item.name_commodity || '';
      
      // 创建商品名称与图片的映射关系
      const productImageMap = {
        '箱式加热炉': '../../static/images/xiangshijiarelu.jpg',
        '柜式加热炉': '../../static/images/guishijiarelu.jpg',
        '搅拌器': '../../static/images/jiaobanji.jpg',
        '家用搅拌器': '../../static/images/shiyanyongfensuiji.jpg',
        '锐牌粉碎机': '../../static/images/ruipaijiaobanji.jpg',
        '粉碎机': '../../static/images/fensuiji.jpg'
      };
      
      // 检查商品名称是否包含映射表中的关键词
      for (const productType in productImageMap) {
        if (productName.includes(productType)) {
          return productImageMap[productType];
        }
      }
      
      // 如果不匹配任何特定产品类型，使用默认图片
      // 确保返回的是字符串类型
      const imageUrl = item.image;
      if (typeof imageUrl === 'string' && imageUrl) {
        return imageUrl;
      }
      return '../../static/images/jiarelu.jpg';
    }
  },
}
</script>

<style lang="scss">
/* 页面基础样式 */
page {
  background: #f8f8f8;
}

.container {
  background: #f8f8f8;
  // 参考HM-search.vue的padding-top设置，并向下调整
  padding-top: 120upx;
}

/* 顶部导航栏样式 - 修改为与HM-search.vue一致 */
.header-nav {
  position: fixed;
  left: 0;
  top: var(--window-top); // 使用与HM-search.vue相同的CSS变量
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #fff;
  padding: 20rpx 30rpx;
  padding-top: 60rpx; // 增加顶部间距，向下调整位置
  z-index: 100;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .06);
  border-bottom: 1upx solid #eee;

  .nav-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60rpx;
    height: 60rpx;

    .back-icon {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .nav-title {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    text {
      font-size: 34upx;
      color: #333;
      font-weight: 500;
    }
  }

  .nav-right {
    width: 60rpx;
    height: 60rpx;
  }
}

/* 内容区域的顶部间距，避免被导航栏遮挡 */
.content-wrapper {
  padding-top: 20upx; // 减少间距，因为容器已经有padding-top了
}

/* === 原有的product.vue样式 === */

.carousel {
  height: 722upx;
  position: relative;

  swiper {
    height: 100%;
  }

  .image-wrapper {
    width: 100%;
    height: 100%;

    .loaded {
      width: 100%;
      height: 100%;
    }
  }
}

.share-section {
  display: flex;
  align-items: center;
  color: #c8ad3d;
  background: #fffced;
  height: 80upx;
  margin: 20upx;
  border-radius: 10upx;
  padding: 0 20upx;

  .share-icon {
    display: flex;
    align-items: center;
    width: 70upx;
    height: 30upx;
    line-height: 1;
    border: 1px solid;
    border-radius: 4upx;
    justify-content: center;
    font-size: 22upx;
    margin-right: 20upx;
  }

  .tit {
    flex: 1;
  }

  .share-btn {
    display: flex;
    align-items: center;
    padding: 8upx 18upx;
    border-radius: 20upx;
    background: #dfa935;
    font-size: 24upx;
    color: #fff;

    .yticon {
      margin-left: 10upx;
    }
  }
}

/* 商品信息 */
.introduce-section {
  background: #fff;
  padding: 20upx 30upx;

  .title {
    font-size: 32upx;
    color: #333;
    display: block;
    line-height: 1.4;
    font-weight: 500;
  }

  .description {
    font-size: 26upx;
    color: #666;
    display: block;
    line-height: 1.5;
    margin-top: 10upx;
    margin-bottom: 10upx;
  }

  .price-box {
    display: flex;
    align-items: baseline;
    padding: 26upx 0 10upx;

    .price-tip {
      color: #138f87;
      font-size: 24upx;
    }

    .price {
      color: #138f87;
      font-size: 42upx;
      font-weight: 600;
    }

    .m-price {
      margin: 0 12upx;
      color: #999;
      font-size: 24upx;
      text-decoration: line-through;
    }

    .coupon-tip {
      align-items: center;
      padding: 4upx 10upx;
      background: #138f87;
      font-size: 20upx;
      color: #fff;
      border-radius: 6upx;
      line-height: 1;
      transform: translateY(-4upx);
    }
  }

  .bot-row {
    display: flex;
    align-items: center;
    height: 50upx;
    font-size: 24upx;
    color: #999;

    text {
      flex: 1;
    }
  }
}

/*  详情卡片 */
.c-list {
  margin-top: 16upx;
  background: #fff;

  .c-row {
    display: flex;
    align-items: center;
    padding: 20upx 30upx;
    position: relative;

    .tit {
      width: 140upx;
    }

    .con {
      flex: 1;
      color: #999;

      .selected-text {
        color: #138f87;
      }
    }

    .con-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      color: #999;
      line-height: 40upx;
    }

    .bz-list {
      height: 40upx;
      font-size: 24upx;
      color: #999;

      text {
        display: inline-block;
        margin-right: 10upx;
      }
    }

    .yticon {
      color: #ccc;
    }

    &.b-b:after {
      content: '';
      position: absolute;
      left: 30upx;
      bottom: 0;
      width: 690upx;
      height: 0;
      border-bottom: 1px solid #efefef;
    }
  }

  .red {
    color: #138f87 !important;
  }
}

/* 评价 */
.eva-section {
  margin-top: 16upx;
  background: #fff;
  padding: 20upx 30upx;

  .e-header {
    display: flex;
    align-items: center;
    height: 70upx;
    font-size: 28upx;
    color: #333;

    .tit {
      font-size: 30upx;
      color: #333;
      margin-right: 4upx;
    }

    .tip {
      flex: 1;
      text-align: right;
    }

    .icon-you {
      margin-left: 10upx;
    }
  }
}

.eva-box {
  display: flex;
  padding: 20upx 0;

  .portrait {
    flex-shrink: 0;
    width: 80upx;
    height: 80upx;
    border-radius: 100px;
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 28upx;
    color: #138f87;
    padding-left: 26upx;

    .con {
      font-size: 28upx;
      color: #383838;
      padding: 20upx 0;
    }

    .bot {
      display: flex;
      justify-content: space-between;
      font-size: 24upx;
      color: #383838;
    }
  }
}

/*  详情 */
.detail-desc {
  background: #fff;
  margin-top: 16upx;

  .d-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80upx;
    font-size: 30upx;
    color: #383838;
    position: relative;

    text {
      padding: 0 20upx;
      background: #fff;
      position: relative;
      z-index: 1;
    }

    &:after {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%);
      width: 300upx;
      height: 0;
      content: '';
      border-bottom: 1px solid #ccc;
    }
  }
}

/* 规格选择弹窗 */
.attr-content {
  padding: 10upx 30upx;

  .a-t {
    display: flex;

    image {
      width: 170upx;
      height: 170upx;
      flex-shrink: 0;
      margin-top: -40upx;
      border-radius: 8upx;
    }

    .right {
      display: flex;
      flex-direction: column;
      padding-left: 24upx;
      font-size: 26upx;
      color: #138f87;
      line-height: 42upx;

      .price {
        font-size: 32upx;
        color: #138f87;
        margin-bottom: 10upx;
      }

      .selected-text {
        margin-right: 10upx;
      }
    }
  }

  .attr-list {
    display: flex;
    flex-direction: column;
    font-size: 30upx;
    color: #333;
    padding-top: 30upx;
    padding-left: 10upx;
  }

  .item-list {
    padding: 20upx 0 0;
    display: flex;
    flex-wrap: wrap;

    text {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #eee;
      margin-right: 20upx;
      margin-bottom: 20upx;
      border-radius: 100upx;
      min-width: 60upx;
      height: 60upx;
      padding: 0 20upx;
      font-size: 28upx;
      color: #383838;
    }

    .selected {
      background: #fbebee;
      color: #138f87;
    }
  }
}

/*  弹出层 */
.popup {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99;

  &.show {
    display: block;

    .mask {
      animation: showPopup 0.2s linear both;
    }

    .layer {
      animation: showLayer 0.2s linear both;
    }
  }

  &.hide {
    .mask {
      animation: hidePopup 0.2s linear both;
    }

    .layer {
      animation: hideLayer 0.2s linear both;
    }
  }

  &.none {
    display: none;
  }

  .mask {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .layer {
    position: fixed;
    z-index: 99;
    bottom: 0;
    width: 100%;
    min-height: 40vh;
    border-radius: 10upx 10upx 0 0;
    background-color: #fff;

    .btn {
      height: 66upx;
      line-height: 66upx;
      border-radius: 100upx;
      background: #138f87;
      font-size: 30upx;
      color: #fff;
      margin: 30upx auto 20upx;
    }
  }

  @keyframes showPopup {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes hidePopup {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes showLayer {
    0% {
      transform: translateY(120%);
    }

    100% {
      transform: translateY(0%);
    }
  }

  @keyframes hideLayer {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(120%);
    }
  }
}

/* 底部操作菜单 */
.page-bottom {
  position: fixed;
  left: 30upx;
  bottom: 30upx;
  z-index: 95;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 690upx;
  height: 100upx;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
  border-radius: 16upx;

  .p-b-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24upx;
    color: #333;
    width: 96upx;
    height: 80upx;

    .yticon {
      font-size: 40upx;
      line-height: 48upx;
      color: #383838;
    }

    &.active,
    &.active .yticon {
      color: #138f87;
    }

    .icon-fenxiang2 {
      font-size: 42upx;
      transform: translateY(-2upx);
    }

    .icon-shoucang {
      font-size: 46upx;
    }

    .cart-icon {
      width: 40upx;
      height: 40upx;
      margin-right: 10upx;
    }
  }

  .action-btn-group {
    display: flex;
    height: 76upx;
    border-radius: 100px;
    overflow: hidden;
    box-shadow: 0 20upx 40upx -16upx #fa436a;
    box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
    background: linear-gradient(to right, #00aa7f, #4a956e, #00aa7f);
    margin-left: 20upx;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      top: 50%;
      right: 50%;
      transform: translateY(-50%);
      height: 28upx;
      width: 0;
      border-right: 1px solid rgba(255, 255, 255, .5);
    }

    .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 180upx;
      height: 100%;
      font-size: 28upx;
      padding: 0;
      border-radius: 0;
      background: transparent;
    }
  }
}

/* 弹出卡片样式 */
.pop-card {
  position: fixed;
  left: 20upx;
  width: 710upx;
  min-height: 30vh;
  background: white;
  border-radius: 20upx 20upx 0 0;
  padding: 40upx 30upx;
  transition: bottom 0.3s ease;
  z-index: 100;
  box-shadow: 0 -10upx 30upx rgba(0, 0, 0, 0.1);

  .close {
    position: absolute;
    top: 20upx;
    right: 30upx;
    font-size: 50upx;
    color: #999;
  }

  .image-wrapper {
    width: 120upx;
    height: 120upx;
    margin-right: 20upx;
    border-radius: 10upx;
    overflow: hidden;

    .image-loaded {
      width: 100%;
      height: 100%;
    }
  }

  .price {
    color: #138f87;
    font-size: 32upx;
    font-weight: bold;
    margin-bottom: 10upx;
  }

  .choice {
    color: #666;
    font-size: 26upx;
  }

  .choose-num {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40upx;
    font-size: 30upx;
  }

  .confirm {
    position: fixed;
    left: 50upx;
    right: 50upx;
    height: 80upx;
    background: #138f87;
    color: white;
    border: none;
    border-radius: 40upx;
    font-size: 32upx;
  }
}

/* 返回顶部按钮 */
.back-to-top {
  position: fixed;
  right: 30upx;
  bottom: 150upx;
  width: 80upx;
  height: 80upx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;

  .yticon {
    color: white;
    font-size: 40upx;
  }
}

/* 通用样式 */
.t-r {
  text-align: right;
}

.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.b-b {
  position: relative;

  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1upx;
    background: #efefef;
  }
}
</style>